<template>
  <div class="RightFzjkDetailsAdd">
    <el-form
      ref="elForm"
      :model="PopUpformData"
      size="medium"
      :rules="rules"
      label-width="1.2rem"
      class="popUp-from"
    >
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="变电站名称" prop="bdzmc">
            <el-select
              v-model="PopUpformData.bdzmc"
              placeholder
              clearable
              disabled
              :style="{ width: '100%' }"
              filterable
            >
              <el-option
                v-for="(item, index) in bdzmcxl"
                :key="index"
                :label="item.stationName"
                :value="item.stationId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="区域名称">
            <el-select
              v-model="PopUpformData.qymc"
              placeholder
              clearable
              disabled
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in qymcXl"
                :key="index"
                :label="item.areaName"
                :value="item.areaId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="机器人名称">
            <el-input v-model="PopUpformData.zzlx" />
            <!-- <el-select
              v-model="PopUpformData.zzlx"
              placeholder
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in substationOptions"
                :key="index"
                :label="item.interval"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>-->
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="机器人ID" prop="zzmc">
            <el-input v-model="PopUpformData.zzmc"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="型号">
            <el-input disabled v-model="PopUpformData.xh"></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="生产厂家">
            <el-input v-model="PopUpformData.azwz"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="投运日期">
            <el-date-picker
              :style="{width: '100%'}"
              v-model="PopUpformData.tyrq"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              popper-class="times"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="摄像头类型">
            <el-select
              v-model="PopUpformData.scgj"
              placeholder
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in scgjOptions"
                :key="index"
                :label="item.jclxName"
                :value="item.jclxId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="视频通道编码">
            <el-input v-model="PopUpformData.ccbh"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="buttom-box">
        <el-button type="primary" @click="determine">确定</el-button>
        <el-button type="primary" @click="dialog">取消</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import time from "@/utils/time.js";
import { ParameterManagementModule } from "@/store/modules/ParameterManagement";
@Component
export default class extends Vue {
  @Prop() PopUptitle!: any;
  @Prop() multipleSelection!: any;

  //弹框表单
  public PopUpformData: any = {
    bdzmc: "",
    qymc: "",
    zzlx: "",
    zzmc: "",
    xh: "v5",
    azwz: "",
    tyrq: "",
    scgj: "",
    ccbh: "",
  };
  bdzmcxl = [];
  qymcXl = [];
  scgjOptions = [
    { jclxName: "可见光摄像机", jclxId: "0" },
    { jclxName: "红外摄像机", jclxId: "1" },
  ];
  rules = {
    // stationName: [{ required: true, message: "请输入内容", trigger: "blur" }],
    zzmc: [{ required: true, message: "请输入内容", trigger: "blur" }],
    // pointType: [{ required: true, message: "请输入内容", trigger: "blur" }],
    // deviceId: [{ required: true, message: "请输入内容", trigger: "blur" }],
  };

  substationOptions = [];
  $refs!: {
    elForm: any;
  };
  get treeSbSsdsId() {
    return ParameterManagementModule.treeSbIdName.ssdsId;
  }
  get bdzId() {
    return ParameterManagementModule.treeSbIdName.bdzId;
  }
  get parentId() {
    return ParameterManagementModule.treeSbIdName.parentId;
  }

  //弹框确定按钮
  determine() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) {
        this.$message({
          type: "warning",
          message: "表单校验不通过",
        });
        return;
      }
      let formData = this.PopUpformData;
      if (this.PopUptitle == "新建") {
        var from = {
          area: formData.qymc,
          cameraname: this.cameraIdToname(formData.scgj),
          cameratype: formData.scgj,
          deviceId: formData.zzmc,
          deviceName: formData.zzlx,
          id: "",
          modle: formData.xh,
          run_date: formData.tyrq,
          sccj: formData.azwz,
          stationId: formData.bdzmc,
          stationName: this.stationIdToname(formData.bdzmc),
          videocode: formData.ccbh,
        };

        (this as any).$services
          .insertRobot({ data: from, method: "post" })
          .then((result: any) => {
            // console.log(result);
            if (result.code === 200) {
              this.$message({
                showClose: true,
                message: result.message,
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: result.message,
                type: "warning",
              });
            }
          })
          .catch((err: object) => {
            console.log(err);
          });
        this.$emit("determine", false);
        this.$emit("initList");
      }
      if (this.PopUptitle == "修改") {
        var form = {
          area: formData.qymc || "",
          deviceId: formData.zzmc || "",
          deviceName: formData.zzlx || "",
          cameratype: formData.scgj || "",
          cameraname: this.cameraIdToname(formData.scgj),
          id: "",
          modle: formData.xh || "",
          run_date: formData.tyrq || "",
          sccj: formData.azwz || "",
          stationId: formData.bdzmc || "",
          stationName: this.stationIdToname(formData.bdzmc),
          videocode: formData.ccbh || "",
        };
        (this as any).$services
          .updateRobot({ data: form, method: "post" })
          .then((result: any) => {
            // console.log(result);
            if (result.code === 200) {
              this.$message({
                showClose: true,
                message: result.message,
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: result.message,
                type: "warning",
              });
            }
          })
          .catch((err: object) => {
            console.log(err);
          });

        this.$emit("determine", false);
        this.$emit("initList");
      }
    });
  }
  dialog() {
    this.$emit("determine", false);
  }
  bdzxl() {
    //变电站下拉
    (this as any).$services
      .getStationList({ data: { ssds: this.treeSbSsdsId } })
      .then((result: any) => {
        this.bdzmcxl = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  qvmcXl() {
    (this as any).$services
      .getDeviceMenuList({ data: { area: (this as any).PopUpformData.qymc } })
      .then((result: any) => {
        // console.log(result);
        this.qymcXl = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
    // name to id
  cameranameToId(val) {
    if (!val) return "";
    return this.scgjOptions.filter((o) => o.jclxName == val)[0].jclxId;
  }
  // id to name
  cameraIdToname(val) {
    if (!val) return "";
    return this.scgjOptions.filter((o) => o.jclxId == val)[0].jclxName;
  }
    // station id to name
  stationIdToname(val) {
    if (!val) return "";
    return this.bdzmcxl.filter((o) => o.stationId == val)[0].stationName;
  }
  mounted() {
    // console.log(this.isShow);
    if (this.PopUptitle == "修改") {
      //  this.PopUpformData = this.multipleSelection[0];deviceName
      this.PopUpformData.zzmc = this.multipleSelection[0].devid;
      this.PopUpformData.zzlx = this.multipleSelection[0].devname;
      //  this.PopUpformData.xh=this.multipleSelection[0].xh;
      this.PopUpformData.azwz = this.multipleSelection[0].cj;
      this.PopUpformData.tyrq = this.multipleSelection[0].tysj;
      this.PopUpformData.scgj = this.cameranameToId(
        this.multipleSelection[0].cameraname
      );
      this.PopUpformData.ccbh = this.multipleSelection[0].videocode;
    }

    this.bdzxl();
    this.PopUpformData.bdzmc = this.bdzId;
    this.qvmcXl();

    this.PopUpformData.qymc = this.parentId;
    // console.log(this.PopUpformData.qymc);
  }
}
</script>

<style lang="scss" scoped>
.RightFzjkDetailsAdd {
  width: 100%;
  height: 100%;
}
</style>

